import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import "../../css/zh/Sjdl.css";
import { Form, Input, Space, Toast } from "antd-mobile";
import Sj from "../../css/zh/icon/sj.svg?react";
import store from "../../redux";
import axios from "axios";

const Sjdl = () => {
  const navigate = useNavigate(); // 路由跳转
  const [visible, setVisible] = useState(null); // 手机号
  const [visible1, setVisible1] = useState(null); // 验证码
  const [num, setNum] = useState(0); //倒计时
  useEffect(() => {
    if (num > 0) {
      setTimeout(() => {
        setNum(num - 1);
      }, 1000);
    }
  });
  const onFinish = (values) => {
    store.dispatch({ type: "Lp", lphone: visible });
    axios
      .post("http://localhost:3000/sjdl", { aa: Number(visible1) })
      .then((res) => {
        console.log(res.data.success);
        if (res.data.success) {
          navigate("/tar/shou");
        } else {
          Toast.show({
            icon: "fail",
            content: "验证码错误",
          });
        }
      });
    console.log(values);
  };
  function sjlogin() {
    axios
      .post("http://localhost:3000/zsjlogin", { phone: visible })
      .then((req, res) => {
        if (req.data.code == 200) {
          setNum(60);
          Toast.show({
            content: "验证码获取成功",
            position: "top",
          });
          axios
            .post("http://localhost:3000/send-sms", {
              phoneNumber: Number(visible),
            })
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          Toast.show({
            icon: "fail",
            content: "该手机号没注册请先注册",
          });
        }
      });
  }
  return (
    <div>
      <div className="sjdl-login">
        <Sj className="sj" />
        <h2>价格优惠，随叫随到</h2>
      </div>
      <div className="sjdl-inp">
        <Form
          onFinish={onFinish}
          layout="vertical"
          footer={<button className="sjdl-btn">立即登录</button>}
        >
          <Form.Item
            rules={[
              { required: true, message: "手机号不能为空" },
              {
                pattern: /^1[3456789]\d{9}$/,
                message: "请输入正确的手机号",
              },
            ]}
            label="手机号"
            name="username"
          >
            <Input
              onChange={(val) => {
                setVisible(val);
              }}
              placeholder="请输入手机号"
              clearable
            />
          </Form.Item>
          <Form.Item
            extra={
              !num ? (
                <span
                  onClick={() => {
                    sjlogin();
                  }}
                  style={{ color: "#7210ff" }}
                >
                  获取验证码
                </span>
              ) : (
                <span style={{ color: "#7210ff", fontSize: "16px" }}>
                  {num}秒后重试
                </span>
              )
            }
            label="验证码"
            rules={[{ required: true, message: "验证码不能为空" }]}
            name="password"
          >
            <Input
              onChange={(val) => {
                setVisible1(val);
              }}
              placeholder="请输入验证码"
              clearable
            />
          </Form.Item>
        </Form>
      </div>
      <div style={{ display: "flex" }}></div>
      <p className="sjdl-p">
        登录及接受用户协议 <span style={{ color: "#7210ff" }}>用户协议</span>
        &nbsp;及 &nbsp;<span style={{ color: "#7210ff" }}>隐私协议</span>
      </p>
    </div>
  );
};

export default Sjdl;
